<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="title mb-3">
              <div class="label_grouping">
                <div class="states-type">
                  <span class="type-title">标签分组</span>
                  <div style="margin-left:20px;display:inline-block;">
                    <button
                      type="button"
                      class="btn btn-light rounded-pill btn-sm states-type-item"
                      :class="{ isActive: siteChange == index }"
                      v-for="(item,index) in sitetype"
                      :key="index"
                      @click="allSites(index)"
                    >
                      {{ item }}
                    </button>
                  </div>
                </div>
              </div>
              <div>
                <b-dropdown dropup variant="secondary" class="butn">
                  <template slot="button-content">
                    <i class="ri-add-line align-middle" style="font-size: 1rem;"></i>
                    <span style="margin:0 20px 0 6px;">标签管理</span>
                    <i class="mdi mdi-chevron-up"></i>
                  </template>
                  <b-dropdown-item-button @click="showModalGrouping=true">创建分组</b-dropdown-item-button>
                  <b-dropdown-item-button @click="showModal=true">创建分类</b-dropdown-item-button>
                </b-dropdown>
              </div>
            </div>
            <div class="labelName mb-3">
              <span class="label_title">标签名称</span>
              <b-form-input
                for="text"
                v-model="groupingName"
                placeholder="请输入一个分组名称，不能大于6个字，不能有特殊符号"
              ></b-form-input>
            </div>
            <div class="labelGroupName mb-3">
              <span class="label_title">所属标签组名称</span>
              <multiselect
                v-model="labelGroup"
                :options="labelGroupList"
                :multiple="true"
                placeholder="请选择标签组,支持多标签标记"
              ></multiselect>
            </div>
            <div class="labelKeyword mb-3">
              <span class="label_title">标签主题关键词</span>
              <textarea
                v-model="labelKeyword"
                class="form-control"
                name="textarea"
                rows="6"
                placeholder="关键词"
              ></textarea>
            </div>
            <div class="ambiguousWords mb-4">
              <div class="label_title">
                <div>监视屏蔽歧义词</div>
                <div class="font-size-12">
                  <el-switch
                    v-model="ambiguousWordsSwitch"
                    active-color="#5664d2"
                    inactive-color="#eff2f7">
                  </el-switch>
                  (筛选开关)
                </div>
              </div>
              <textarea
                v-model="ambiguousWords"
                class="form-control"
                name="textarea"
                rows="6"
                placeholder="如需配置的屏蔽词生效请打开筛选,关键词之间用“|”隔开"
              ></textarea>
            </div>
            <div style="padding-left:120px;">
              <b-button class="mr-5" @click="determine" variant="primary">确定</b-button>
              <b-button @click="determine" variant="light">取消</b-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加分类"
      :visible.sync="showModal"
      width="40%"
      :before-close="handleClose">
      <form>
        <div class="form-group">
          <label for="productname">分类名称</label>
          <b-form-input
            for="text"
            v-model="classificationName"
            placeholder="请输入一个分类名称，不能大于6个字，不能有特殊符号"
          ></b-form-input>
        </div>
      </form>
      <span slot="footer" class="dialog-footer">
        <b-button variant="primary" @click="showModal = false">
          提交
        </b-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加分组"
      :visible.sync="showModalGrouping"
      width="40%"
      :before-close="handleClose">
      <form>
        <div class="form-group">
          <label for="productname">标签类型</label>
          <multiselect
            v-model="labelType"
            :options="labelTypeList"
            placeholder="请选择一个标签数据分类项"
          ></multiselect>
        </div>
        <div class="form-group">
          <label for="productname">分组名称</label>
          <b-form-input
            for="text"
            v-model="groupingName"
            placeholder="请输入一个分组名称，不能大于6个字，不能有特殊符号"
          ></b-form-input>
        </div>
      </form>
      <span slot="footer" class="dialog-footer">
        <b-button variant="primary" @click="showModalGrouping = false">
          提交
        </b-button>
      </span>
    </el-dialog>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";

import Multiselect from "vue-multiselect";
export default {
  components: {
    Layout,
    PageHeaderNew,

    Multiselect,
  },
  data () {
    return {
      items: [
        {
          text: "标签管理",
          url: "/lable",
        },{
          text: "添加标签",
          url: "/",
        }
      ],
      sitetype: ["行业标签", "事业标签"],
      siteChange: 0,
      showModal: false,
      showModalGrouping: false,
      groupingName: "",
      classificationName: "",
      labelType: "",
      labelTypeList: ['类型一','类型二'],
      // 事件分类
      industryLabelList: [
        {
          name: "服务采购",
          index: 1,
        },{
          name: " 建筑工程",
          index: 2,
        },{
          name: "信息技术",
          index: 3,
        },{
          name: "医疗卫生",
          index: 4,
        },{
          name: "机械设备",
          index: 5,
        },{
          name: "交通工程",
          index: 6,
        },{
          name: "市政设施",
          index: 7,
        },{
          name: " 服装布料",
          index: 8,
        },{
          name: "水利水电",
          index: 9,
        },{
          name: "能源化工",
          index: 10,
        },{
          name: "仪器仪表",
          index: 11,
        },{
          name: "农林牧渔",
          index: 12,
        },{
          name: "食品饮品",
          index: 13,
        },{
          name: "制造生产",
          index: 14,
        },{
          name: " 弱电安防",
          index: 15,
        },{
          name: "家居建材",
          index: 16,
        },{
          name: "行政办公",
          index: 17,
        },{
          name: "环保绿化",
          index: 18,
        },{
          name: "日用百货",
          index: 19,
        },{
          name: "材料配件",
          index: 20,
        },{
          name: "债券发行",
          index: 21,
        }
      ],
      industryLabelChange: 1,
      industryLabelType: true,
      labelGroup: "",
      labelGroupList: ["标签组1","标签组2"],
      labelKeyword: "仓储物流|印刷|物业",
      ambiguousWords: "",
      ambiguousWordsSwitch: false,
    }
  },
  methods: {
    allSites(index) {
      this.siteChange = index;
    },
    handleClose(){
      this.showModal = false
      this.showModalGrouping = false
    },
    //事件分类
    eventItem(item) {
      this.industryLabelChange = item.index;
    },
    determine(){
      this.$router.push('/lable')
    },
  }
}
</script>
<style lang="scss" scoped>
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
}
.states-type {
  .type-title {
    min-width: 100px;
    display: inline-block;
    color: #74788d;
    text-align: right;
  }
  .states-type-item {
    font-size: 12px;
    margin-right: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.butn{
  ::v-deep .btn{
    background-color: #252b3b;
    border-color: #252b3b;
    border-radius: 30px;
    display: flex;
    align-items: center;
  }
  ::v-deep .btn-secondary.focus {
    box-shadow: 0 0 0 0.15rem rgb(37 40 58 / 50%);
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
}
.labelName,.labelGroupName,.labelKeyword,.ambiguousWords{
  display: flex;
  align-items: center;
  input,.multiselect{
    width: 400px;
    margin-left: 20px;
  }
  textarea{
    margin-left: 20px;
    width: calc(100% - 150px)
  }
}
.labelKeyword,.ambiguousWords{
  align-items: baseline;
}
.label_title{
  display: inline-block;
  min-width: 100px;
  text-align: right;
}
</style>
